<template>
  <div class="dbFile">
    <!--<j-upload v-model="fileList"></j-upload>-->
    <a-dropdown style="margin-right: 10px;margin-top:10px;">
      <a-button style="margin-left: 8px"> 新建
        <a-icon type="plus"/>
      </a-button>
      <a-menu slot="overlay">
        <a-menu-item key="1" icon="plus" @click="createFile('word')">文字文档</a-menu-item>
        <!--        <a-menu-item key="2" icon="plus" @click="createFile('excel')">表格文档</a-menu-item>-->
        <!--        <a-menu-item key="3" icon="plus" @click="createFile('ppt')">演示文档</a-menu-item>-->
      </a-menu>
    </a-dropdown>
  </div>
</template>

<script>
  import { fileSuffix } from '@/components/wps/util/common-data'
  import JUpload from '@/components/jeecg/JUpload'

  export default {
    name: 'dbFile',
    components: {
      JUpload
    },
    data() {
      return {
        loading: false,
        showOther: false,
        tableData: [],
        pageR: {
          page: this.$page,
          size: this.$size
        },
        total: 0,
        action: null,//uploadFileUrl,
        fileName: '',
        progressing: 1,
        showProgressDialog: false,
        file: '',
        isTrusted: false,
        centerDialogVisible: false,
        delFileId: '',
        watchClosed: '',
        fileList: []
      }
    },

    created() {
      this.getFileList()
      this.showOther = true
    },

    methods: {
      getFileList() {
        console.log('sdddddddddddddd')
        this.loading = true
        getFileListByPage(this.pageR).then((res) => {
          if (res.data.data) {
            this.tableData = res.data.data.content
            this.total = res.data.data.totalElements
          } else {
            this.showErrMeg('请求错误！')
          }
          this.loading = false
        }).catch(() => {
          this.showErrMeg('请求错误！')
          this.loading = false
        })
      },

      getViewUrlDbPath(fileId, userId) {
        this.loading = true
        const params = {
          fileId: fileId,
          userId: userId
        }
        getViewUrlDbPath(params).then((res) => {
          console.log(res)
          if (res.data) {
            let r = res.data.data

            // 跳转 使用sessionStorage，避免关键信息在ip中暴露
            //  o2ulDNOXGwvBRndehxW14dML+i/qxuVry2u3TXIhR9CrYEbhZi7RywQnYojV/SgC/PffdTE3WKU0/u0CXtgFzw==
            // 使用push会停留当前页面，故不采纳
            // params 传递参数，子组件无法渲染iframe组件，故不采纳
            sessionStorage.wpsUrl = r.wpsUrl
            sessionStorage.token = r.token
            const jump = this.$router.resolve({ name: 'viewFile' })
            window.open(jump.href, '_blank')
          } else {
            this.showErrMeg('请求错误！')
          }
          this.loading = false
        }).catch(() => {
          this.showErrMeg('请求错误！')
          this.loading = false
        })
      },

      handleEdit(fileId, userId) {
        this.getViewUrlDbPath(fileId, userId)
      },

      handleDel(id) {
        this.delFileId = id
        this.centerDialogVisible = true
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          showConfirmButton: true,
          showCancelButton: true,
          showClose: false,
          confirmButtonClass: 'dbConfirmButton',
          type: 'warning',
          center: true
        }).then(() => {
          this.delFile()
        }).catch(() => {
        })
      },

      delFile() {
        this.loading = true
        const param = {
          id: this.delFileId
        }
        delFile(param).then(res => {
          if (res.data) {
            const r = res.data
            if (r.data) {
              this.showSuccessMeg(r.msg)
              this.getFileList()
            } else {
              this.showErrMeg(r.msg)
            }
          } else {
            this.showErrMeg('请求错误！')
          }
          this.loading = false
        }).catch(() => {
          this.showErrMeg('请求错误！')
          this.loading = false
        })
      },

      handleProgress(event, file) {
        this.showProgressDialog = true
        this.progressing = Number(parseFloat(file.percentage).toFixed(2))
        this.fileName = file.name
        this.isTrusted = event.isTrusted
      },

      handleAvatarSuccess(response) {
        this.progressing = 100
        setTimeout(() => {
          this.showProgressDialog = false
          if (response.data) {
            this.getFileList()
            this.showSuccessMeg(response.msg)
          } else {
            this.showErrMeg(response.msg)
          }
        }, 1800)
      },

      beforeUpload() {
        // 此处判断文件类型，以及文件大小  "MB";
        const size = (Number(this.file.size) / (1024 * 1024)).toFixed(2)
        const fileName = this.file.name
        const fileStrArr = fileName.split('.')
        const suffix = fileStrArr[fileStrArr.length - 1]

        let result = fileSuffix.some((item) => {
          return item === suffix
        })

        if (!result) {
          this.showErrMeg('不支持该文件类型')
          return false
        }

        if (size > 10) {
          this.showErrMeg('文件不能大于10MB')
          return false
        }
      },

      handleChange(file) {
        this.file = file
      },

      errFunc() {
        this.showErrMeg('上传失败！')
      },

      createFile(template) {
        sessionStorage.createFileUrlType = template
        let routeUrl = this.$router.resolve({
          path: '/modules/eoa/officialdoc/createFile'
        })
        this.watchClosed = window.open(routeUrl.href, '_blank')
      },

      getRowIndex(index) {
        return index + 1 + (this.pageR.page - 1) * this.pageR.size
      }
    },

    filters: {
      formatFileSize(sourceValue, fmt) {
        return (Number(sourceValue) / (1024 * 1024)).toFixed(fmt)
      }
    },

    watch: {
      watchClosed() {
      }
    }
  }
</script>

<style scoped>
  .dbFile {
    padding-top: 2%;
    padding-left: 4%;
  }

  .e-b {
    margin-top: 20px;
    margin-right: 10px;
  }

  .el-dropdown {
    vertical-align: top;
  }

  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .icon {
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    margin: 0 8px 0 0;
  }
</style>
